<template>
  <!-- rows="2"
  autosize
  type="textarea"
  maxlength="50"-->
  <Field
    :border="border"
    v-model="currentValue"
    @change="$emit('change', currentValue, name)"
    :name="name"
    :label="label"
    :labelWidth="labelWidth"
    :disabled="disabled"
    :readonly="showType === 'view'"
    :placeholder="placeholder"
    :type="type"
    :rules="rules"
    :is-link="true"
    :arrow-direction="arrow"
    :autosize="autosize"
    :rows="rows"
    :maxlength="maxlength"
    :show-word-limit="showWordLimit"
    @click="clickHandle"
    :class="{inputAlignRight: textAlign}"
  >
    <template #button>
      <slot></slot>
    </template>
  </Field>
</template>

<script>
import common from './item'
export default {
  mixins: [common],
  computed: {
    autosize () {
      return this.info.autosize || false
    },
    rows () {
      return this.info.rows || '2'
    },
    maxlength () {
      return this.info.maxlength
    },
    showWordLimit () {
      return this.info.showWordLimit || false
    },
    to () {
      return this.info.to
    },
    textAlign () {
      return this.info.textAlign || 'left'
    }
  },
  methods: {
    clickHandle () {
      this.to && this.$router.push(this.to)
    }
  }
}
</script>

<style lang="css">
.inputAlignRight input {
  text-align: right;
}
</style>
